<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定css</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    .active{
        width: 200px;
        height: 200px;
        border: 1px solid aquamarine;
    }
    .font{
        color: red;
        font-size: 25px;

    }
</style>
<body>
<div id="app">
    <p :class="color">添加样式active</p>
    <p :class="[color,font]">数组添加样式active,font</p>
    <p :class="{active:false,font:true}">通过对象添加样式active:false,font:true</p>
    <hr/>
    <p :style="bgColor">添加样式bgColor</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            color: "active",
            font : "font",
            bgColor :{
                backgroundColor:"red",
            }
        }
    });
</script>
</body>
</html>